<template>
	<view class="content">
		<view class="top">
			<image src="/static/index/index_header.png" mode="" class="topimg"></image>
		</view>
		<view class="container">
			<view class="distributeMode">
				<view class="item" @tap="ziqu">
					<image class="imgcon" src="/static/index/index_collection.png"></image>
					<view class="title">门店自取</view>
					<view class="subtitle">免排队</view>
				</view>
				<view class="item" @tap="waimai">
					<image class="imgcon" src="/static/index/index_buyout.png"></image>
					<view class="title">外卖点单</view>
					<view class="subtitle">无接触，快送达</view>
				</view>
			</view>
			<view class="info">
				<view class="userimg">
					<image class="userimg2" src="/static/index/index_user.png"></image>
				</view>
				<view class="middleinfo">
					<view class="topname">
						<text class="title">我的积分</text>
						<text class="value">{{jifen}}</text>
					</view>
					<view class="bottomtip">
						<text class="subtitle">可兑换优惠券及限量周边</text>
					</view>
				</view>
				<view class="vipcode">
				<image class="vipimg" src="/static/index/index_vipcode.png"></image>
				<text class="subtitle">会员码</text>
				</view>
			</view>
			<view>
				<image class="footerimg" src="../../static/index/index_bottom.png"></image>
			</view>
		</view>
		<!-- <image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jifen: 440,
			}
		},
		onLoad() {
			
		},
		
		methods: {
			ziqu(){
				uni.switchTab({
					url:'../order/order'
				})
			},
			waimai(){
				uni.switchTab({
					url:'../order/order'
				})
			}
		}
	}
</script>

<style scoped>
	page {
		height: auto;
		min-height: 100%;
	}
	
	/* 原小程序模板
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.top{
		position: relative;
		width: 100%;
		height: 600rpx;
		
	}
	
	.topimg{
		width: 100%;
		height: 700rpx;
	}
	
	.container{
		padding:0 10rpx;
	}
	
	.distributeMode{
		background-color: white;
		border-radius: 14rpx;
		box-shadow: 0 2rpx 2rpx;
		position: relative;
		margin-top: -80rpx;
		margin-bottom: 10rpx;
		padding: 30rpx 0;
		display:flex;
		align-items: center;
		justify-content: center;
			/* .title{
				color: #2A6438;
				font-weight: 600;
				font-size: 30rpx;
			}
			
			.subtitle{
				color:gray;
				font-size: 10px;
			} */
	}
	
	
	.item{
		display: flex;
		flex:1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
		
	.imgcon{
			width: 84rpx;
			height: 84rpx;
			margin: 20rpx;
	}
		
	.title{
		/*color: #2A6438;*/
		font-weight: 600;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.subtitle{
		color:gray;
		font-size: 10px;
	}
	
	.info{
		position: relative;
		margin-bottom: 10rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		background-color: #ffffff;
		box-shadow: 0 2rpx 2rpx;
		border-radius: 14rpx;
	}
		
	.userimg{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-right: 40rpx;
	}
	
	.userimg2{
		width: 64rpx;
		height: 64rpx;
	}
	
	.middleinfo{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.topname{
		display: flex;
		align-items: center;
	}
	/*积分值*/
	.value {
		font-size: 18rpx;
	}
	
	.bottomtip{
		display: flex;
		align-items: center;
	}
		
	.vipcode{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-size-sm;
		padding-left: 200rpx;
	}
	
	.vipimg{
			width: 54rpx;
			height: 54rpx;
			/* margin-bottom: 10rpx; */
	}
	
	
	.footerimg{
		position: relative;
		padding-top: 10rpx;
		width: 100%;
		height: 300rpx;
	}
	
	
	/* 原小程序模板
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
</style>
